<template>
  <a-table
    :data-source="dataList"
    :columns="columns"
    :pagination="pagination"
    @change="handleTableChange"
    @expand="expandRow"
    rowKey="taskId"
  >
    <template #expandedRowRender>
      <a-table
        :columns="innerColumns"
        :data-source="innerData"
        :pagination="innerpagination"
      >
      </a-table>
    </template>
  </a-table>
</template>
<script>
import { reactive, toRefs, onBeforeMount } from "vue";
import { getTaskTableList, getTaskList } from "@/api/api";
export default {
  components: {},

  setup() {
    const state = reactive({
      visible: false,
      modelTitle: "修改",
      dataList: [],
      innerData: [],
      pagination: {
        showQuickJumper: true,
        pageSize: 5,
        showTotal: (total) => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ["10", "15", "30", "40", "50"],
      },
      innerpagination: {
        showQuickJumper: true,
        pageSize: 5,
        showTotal: (total) => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ["10", "15", "30", "40", "50"],
      },
    });

    const columns = [
      {
        title: "ID",
        dataIndex: "taskId",
        key: "taskId",
      },
      {
        title: "开始时间",
        dataIndex: "dateStart",
        key: "dateStart",
      },
      {
        title: "结束时间",
        dataIndex: "dateEnd",
        key: "dateEnd",
      },
      {
        title: "日志",
        dataIndex: "log",
        key: "log",
      },
      {
        title: "失败条数",
        dataIndex: "numFail",
        key: "numFail",
      },
      {
        title: "成功条数",
        dataIndex: "numSucc",
        key: "numSucc",
      },
    ];

    const innerColumns = [
      {
        title: "表ID",
        dataIndex: "taskTableId",
        key: "taskTableId",
      },
      {
        title: "开始时间",
        dataIndex: "dateStart",
        key: "dateStart",
      },
      {
        title: "结束时间",
        dataIndex: "dateEnd",
        key: "dateEnd",
      },
      {
        title: "日志",
        dataIndex: "log",
        key: "log",
      },
      {
        title: "失败条数",
        dataIndex: "numFail",
        key: "numFail",
      },
      {
        title: "成功条数",
        dataIndex: "numSucc",
        key: "numSucc",
      },
    ];

    onBeforeMount(async () => {
      loadData(1, 5);
    });

    /**
     * 加载主表数据
     */
    const loadData = async (current, pageSize) => {
      let response = await getTaskList(current, pageSize);
      let object = response.data;
      state.dataList = object.records;
      state.pagination.total = object.total;
      console.log(state);
    };
    /**
     * 加载子表数据
     */
    const loadInnerData = async (key, current, pageSize) => {
      let response = await getTaskTableList(key, current, pageSize);
      let object = response.data;
      state.innerData = object.records;
      state.innerpagination.total = object.total;
    };

    /**
     * 主表分页方法
     */
    const handleTableChange = (pag, filters, sorter) => {
      loadData(pag.current, pag.pageSize);
      console.log(pag);
      console.log(filters);
      console.log(sorter);
    };

    //展开主表行方法
    const expandRow = (expanded, record) => {
      if (expanded) {
        console.log(record);
        loadInnerData(record.taskId, 1, 10);
      } else {
        state.innerData = [];
      }
    };
    return {
      ...toRefs(state),
      columns,
      innerColumns,
      handleTableChange,
      expandRow,
    };
  },
};
</script>